<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水库管理系统 - 修改水库信息</title>
    <link rel="stylesheet" href="CSS/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <div class="header">
        <h2>水库管理系统</h2>
        <div class="user-info">
            <span>欢迎回来，用户</span>
            <a href="LogoutServlet" class="btn">登出系统</a>
        </div>
    </div>

    <div class="form-container">
        <h3>修改水库信息</h3>
        <form id="update-dam-form">
            <input type="hidden" id="id" name="id">
            <div class="form-group">
                <label for="name">水库名                </label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="river">所属河流：</label>
                <input type="text" id="river" name="river">
            </div>
            <div class="form-group">
                <label for="capacity">库容（亿立方米）：</label>
                <input type="number" id="capacity" name="capacity" step="0.01" required>
            </div>
            <div class="form-group">
                <label for="completeDate">建成时间：</label>
                <input type="date" id="completeDate" name="completeDate" required>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn">更新</button>
                <button type="button" id="cancel-btn" class="btn">取消</button>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function() {
        var id = getQueryParam('id');
        if (!id) {
            alert('参数错误！');
            window.location.href = 'damList.html';
            return;
        }

        // 加载水库信息
        $.ajax({
            url: 'GetDamServlet',
            type: 'GET',
            data: {
                id: id
            },
            success: function(response) {
                var dam = JSON.parse(response);
                $('#id').val(dam.id);
                $('#name').val(dam.name);
                $('#river').val(dam.river);
                $('#capacity').val(dam.capacity);
                $('#completeDate').val(dam.completeDate);
            },
            error: function() {
                alert('加载水库信息失败！');
            }
        });

        // 取消按钮点击事件
        $('#cancel-btn').click(function() {
            window.location.href = 'damList.html';
        });

        // 表单提交事件
        $('#update-dam-form').submit(function(e) {
            e.preventDefault();

            var id = $('#id').val();
            var name = $('#name').val();
            var river = $('#river').val();
            var capacity = $('#capacity').val();
            var completeDate = $('#completeDate').val();

            $.ajax({
                url: 'UpdateDamServlet',
                type: 'POST',
                data: {
                    id: id,
                    name: name,
                    river: river,
                    capacity: capacity,
                    completeDate: completeDate
                },
                success: function(response) {
                    var result = JSON.parse(response);
                    if (result.success) {
                        alert('更新成功！');
                        window.location.href = 'damList.html';
                    } else {
                        alert('更新失败！');
                    }
                },
                error: function() {
                    alert('更新失败！');
                }
            });
        });

        // 获取URL参数函数
        function getQueryParam(param) {
            var reg = new RegExp("(^|&)" + param + "=([^&]*)(&|$)");
            var match = window.location.search.substr(1).match(reg);
            return match ? decodeURIComponent(match[2]) : null;
        }
    });
</script>
</body>
</html>